<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 用户列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
                <!-- <el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10">
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select> -->
                <el-input v-model="roleDesc1" placeholder="用户角色" class="handle-input mr10"></el-input>
                <el-input v-model="phone" placeholder="用户手机号" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="primary" icon="el-icon-circle-plus-outline" class="add-user" @click="addSystemUser">添加系统用户</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
                <!-- <el-table-column type="selection" width="55"></el-table-column> -->
                <el-table-column prop="type" label="角色/岗位" sortable width="150" align="center" :formatter="formatter">
                </el-table-column>
                <el-table-column prop="username" label="姓名" width="120" align="center">
                </el-table-column>
                <el-table-column prop="phone" label="手机" align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" width="120" align="center" :formatter="status">
                </el-table-column>
                <el-table-column prop="createTime" label="添加时间" align="center">
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination 
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" 
                    layout="total, sizes, prev, pager, next, jumper" 
                    :current-page="currentPage"
                    :page-sizes="[10,15,20]"
                    :page-size=pageSize
                    :total=total>
                </el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <!-- <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
            <el-form ref="form" :model="form" label-width="50px">
                <el-form-item label="日期">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.date" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog> -->

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 添加系统用户 -->
        <el-dialog title="添加系统用户" :visible.sync="addSystemVisible" width="50%" center>
            <el-form :model="systemForm"  status-icon :rules="systemRules"  ref="systemForm" label-width="200px" class="demo-ruleForm">
                 <el-form-item label="角色/岗位" >
                    <el-checkbox-group v-model="systemForm.role">
                        <el-checkbox v-for="item in systemForm.role" :label="item.id" :key="item.id" :checked="item.selected">{{item.roleDesc}}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="姓名" prop="userName">
                    <el-input type="username" v-model="systemForm.userName" class="handle-input mr10" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input type="phone" maxlength="11" v-model="systemForm.phone" class="handle-input mr10" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password"  v-model="systemForm.password" class="handle-input mr10" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-radio-group v-model="systemForm.status">
                    <el-radio :label="1" value="1">正常</el-radio>
                    <el-radio :label="0" value="0">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('systemForm')">提交</el-button>
                    <el-button @click="resetForm('systemForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import { Message } from 'element-ui';
    import { getSystemUser,delSystemUser,addSystemUser,getSystemUserRole } from '../../components/api/systemUser.js';
    export default {
        name: 'basetable',
        data() {
            return {
                tableData: [],
                multipleSelection: [],


                roleDesc1: '',
                phone:'',
                total:0,
                pageSize:10,
                currentPage:1,

                del_list: [],
                is_search: false,
                editVisible: false,
                delVisible: false,
                addSystemVisible:false,
                systemForm:{
                    role:[],
                    userName:'',
                    phone:'',
                    password:'',
                    status:1
                },
                 systemRules:{
                    userName: [
                        { required:true, message:'请填写用户名', trigger: 'blur' }
                    ],
                    phone: [
                        { required:true, message:'请填写手机号', trigger: 'blur' }
                    ],
                    password: [
                        { required:true, message:'请填写密码' , trigger: 'blur' }
                    ],
                    status:[
                        { required:true, message:'请填写状态', trigger:'blur'}
                    ]
                },
                idx: -1
            }
        },
        created() {
            this.getData();
            this.getSystemUserJurisdiction();
        },
        computed: {

        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getData();
            },

            handleSizeChange(val){
                this.pageSize = val;
                this.getData();
            },
            //获取系统用户列表
            getData() {
                let router = this.$router;
                let params = {
                    nickName:'',
                    roleDesc:this.roleDesc,
                    phone:this.phone,
                    pageNum:this.currentPage,
                    pageSize:this.pageSize
                }
                getSystemUser(params).then((res)=>{
                    let data = res.data;
                    console.log(data);
                    if(res.status == 200){
                        this.tableData = data.list;
                        this.total = data.total;
                    }else{
                        //  Message({
                        //     message:res.data.msg,
                        //     type:'warning',
                        //     duration:2000,
                        //     onClose:function(){
                        //         router.push('/login');
                        //     }
                        // });
                    }
                    
                }).catch((err)=>{
                    console.log(err);
                });
            },
            //获取系统用户权限角色
            getSystemUserJurisdiction(){
                let router = this.$router;
                let params = {
                    pageNum:1,
                    pageSize:10
                };
                let that = this;
                getSystemUserRole(params).then((res)=>{
                    console.log(res);
                    if(res.status == 200){
                        that.systemForm.role = res.data.list
                        console.log('-----------');
                        // console.log(that.systemForm.role);
                    }
                    
                }).catch((err)=>{
                    console.log(err);
                });


            },

            //搜索
            search() {
                this.getData();
            },
            formatter(row, column) {
                if(row.type == 1){
                    return '普通用户'
                }else if(row.type == 2){
                    return '管理员'
                }
            },
            status(row,column){
                if(row.status == 1){
                    return '可用'
                }else if(row.status == 0){
                    return '禁用'
                }
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            handleEdit(index, row) {
                this.idx = index;
                const item = this.tableData[index];
                this.form = {
                    name: item.name,
                    date: item.date,
                    address: item.address
                }
                this.editVisible = true;
            },

            //获取要删除系统用户的信息
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
                console.log(row.id);
                this.delId = row.id;
            },
            delAll() {
                const length = this.multipleSelection.length;
                let str = '';
                this.del_list = this.del_list.concat(this.multipleSelection);
                for (let i = 0; i < length; i++) {
                    str += this.multipleSelection[i].name + ' ';
                }
                this.$message.error('删除了' + str);
                this.multipleSelection = [];
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            // 保存编辑
            saveEdit() {
                this.$set(this.tableData, this.idx, this.form);
                this.editVisible = false;
                this.$message.success(`修改第 ${this.idx+1} 行成功`);
            },
            // 确定删除
            deleteRow(){
                let params = {
                    id:this.delId
                };
                let that = this;
                delSystemUser(params).then((res)=>{
                    if(res.status == 200 ){
                        
                        that.delVisible = false;
                        Message({
                            message:'删除成功',
                            type:'success',
                            duration:2000,
                            onClose:function(){
                                that.tableData.splice(that.idx, 1);
                            }
                        });
                    }
                    console.log(res);
                }).catch((err)=>{
                    console.log(err);
                });
                
            },

             //添加系统用户
            addSystemUser(){
                this.addSystemVisible = true;
            },

            //提交添加系统用户数据
            submitForm(formName){
                this.$refs[formName].validate((valid) => {
                    console.log(valid);
                    if (valid) {
                        console.log(this.systemForm.role);

                        let Base64 = require('js-base64').Base64;
                        let sysUser = JSON.parse(localStorage.getItem('sysUser'));
                        console.log(Base64.decode(sysUser.nickName));
                        let params = {
                            username:this.systemForm.userName,
                            password:this.systemForm.password,
                            phone:this.systemForm.phone,
                            status:this.systemForm.status,
                            nickName:Base64.decode(sysUser.nickName)
                        }
                        let that = this;
                        addSystemUser(params).then((res)=>{
                            if(res.status == 200){
                                 Message({
                                    message:'添加成功',
                                    type:'success',
                                    duration:2000,
                                    onClose:function(){
                                        that.addSystemVisible = false;
                                    }
                                });
                            }else{
                                Message({
                                    message:res.data.msg,
                                    type:'warning',
                                    duration:2000,
                                    onClose:function(){
                                        console.log('bbb');
                                    }
                                });
                            }
                            console.log(res);
                        }).catch((err)=>{
                            console.log(err);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //重置表单
            resetForm(formName){
                this.$refs[formName].resetFields();
            }
        }
    }

</script>

<style scoped>
    .add-user{
        float:right;
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 190px;
    }

    .handle-input {
        width: 190px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }


    
</style>
